<template>
  <img :src="playList[playListID].al.picUrl" alt="" class="bgimg" />
  <div class="detailTop">
    <div class="detailTopLeft">
      <svg class="icon liebiao" aria-hidden="true" @click="backHome">
        <use xlink:href="#icon-zuojiantou"></use>
      </svg>
      <div class="leftMarquee">
        <!-- 跑马灯插件 -->
        <Vue3Marquee style="color: #fff">{{
          playList[playListID].al.name
        }}</Vue3Marquee>
        <span v-for="item in playList[playListID].ar" :key="item">
          {{ item.name }}
        </span>
        <svg class="icon liebiao" aria-hidden="true">
          <use xlink:href="#icon-youjiantou"></use>
        </svg>
      </div>
    </div>
    <div class="detailTopRight">
      <svg class="icon liebiao" aria-hidden="true">
        <use xlink:href="#icon-fenxiang"></use>
      </svg>
    </div>
  </div>
  <!-- 磁盘部分  开始  -->
  <div class="detailContent" v-show="!gechi">
    <img
      src="@/assets/needle-ab.png"
      alt=""
      class="img_needle"
      :class="{ img_needle_active: !isbofang }"
    />
    <img src="@/assets/cd.png" alt="" class="img_cd" />
    <img
      :src="playList[playListID].al.picUrl"
      @click="gechi = !gechi"
      alt=""
      class="img_ar"
      :class="{ img_ar_active: !isbofang, img_ar_pauesd: isbofang }"
    />
  </div>
  <!-- 磁盘部分  结束  -->
  <!-- 歌词部分 开始 -->
  <div class="musicLyric" ref="gechitop" v-show="gechi" @click="gechi = !gechi">
    <p
      v-for="item in gechishijian"
      :key="item"
      ref=""
      :class="{
        active: yinyueTime * 1000 >= item.time && yinyueTime * 1000 < item.pre,
      }"
    >
      {{ item.lrc }}
    </p>
  </div>
  <!-- 歌词部分 结束 -->
  <!-- 底部部分 开始 -->
  <div class="detailFooter">
    <div class="footerTop">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xihuan"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xiazai"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-diantai"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-iconxiaoxi"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-comment"></use>
      </svg>
    </div>
    <!-- 进度条  开始 -->
    <div class="footerContent">
      <input
        type="range"
        class="range"
        min="0"
        step="0.05"
        :max="gequzhongshijian"
        v-model="yinyueTime"
      />
    </div>
    <!-- 进度条  结束 -->
    <div class="footer">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-iconsMusicyemianbofangmoshiShuffle"></use>
      </svg>
      <svg class="icon" aria-hidden="true" @click="qiehuan(-1)">
        <use xlink:href="#icon-shangyishou"></use>
      </svg>
      <svg
        class="icon bofang"
        aria-hidden="true"
        v-if="isbofang"
        @click="dijibofang"
      >
        <use xlink:href="#icon-bofang"></use>
      </svg>
      <svg class="icon bofang" aria-hidden="true" v-else @click="dijibofang">
        <use xlink:href="#icon-zanting"></use>
      </svg>
      <svg class="icon" aria-hidden="true" @click="qiehuan(1)">
        <use xlink:href="#icon-next"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-next"></use>
      </svg>
    </div>
  </div>
  <!-- 结束 -->
</template>

<script>
import { Vue3Marquee } from "vue3-marquee";
import "vue3-marquee/dist/style.css";
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      gechi: false,
    };
  },
  //  传入播放函数是否播放
  props: ["dijibofang"],
  computed: {
    // 歌曲的索引  歌曲的详细信息  音乐播放的当前时间   播放按钮显示 歌曲总时间
    ...mapState([
      "playListID",
      "playList",
      "yinyueTime",
      "isbofang",
      "gechiArr",
      "gequzhongshijian",
    ]),
    //歌词时间
    gechishijian() {
      let arr;
      // 歌词时间封装 是否有参数
      if (this.gechiArr.lyric) {
        arr = this.gechiArr.lyric.split(/[(\r\n)\r\n]+/).map((item, i) => {
          let min = item.slice(1, 3); //歌词分钟
          let sec = item.slice(4, 6); //歌词秒
          let mill = item.slice(7, 10); //歌词毫秒
          let lrc = item.slice(11, item.length); //切割歌词部分，
          let time =
            parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill); //歌曲一横行的时间相加并转成数字
          // console.log(isNaN(Number(NaN)));
          //判断数值是否为NaN 如果是，就重新进行切割字符串
          if (isNaN(Number(mill))) {
            mill = item.slice(7, 9); //歌词毫秒
            lrc = item.slice(10, item.length); //切割歌词部分，
            time =
              parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill); //重新歌曲一横行的时间相加并转成数字
          }
          // console.log(min, sec, mill, lrc, time);
          return { min, sec, mill, lrc, time };
        });
        //循环拿到下一次播放的列表的时间
        arr.forEach((item, i) => {
          //判断是否为最后一个
          if (i === arr.length - 1 || isNaN(arr[i + 1].time)) {
            // 是的话就让这个属性为0
            item.pre = 100000;
          } else {
            // 如果不是就拿到下一组的数据
            item.pre = arr[i + 1].time;
          }
        });
      }
      // console.log(arr);
      return arr;
    },
  },
  mounted() {},
  methods: {
    // 详情页退出
    backHome() {
      this.isLyricShow = false;
      this.gequxiangqinye();
    },
    qiehuan(i) {
      let index = this.playListID + i;
      if (index < 0) {
        index = this.playList.length - 1;
      } else if (index == this.playList.length) {
        index = 0;
      }
      this.gequsuoyinzhi(index);
    },
    ...mapMutations([
      "anniu",
      "gequxiangqinye",
      "dibuxianshi",
      "gequsuoyinzhi",
    ]),
  },
  //监听播放时间，调用ref 距离顶部位置
  watch: {
    yinyueTime(dangqian) {
      // 获取p的属性
      let p = document.querySelector("p.active");
      if (p) {
        if (p.offsetTop > 200) {
          this.$refs.gechitop.scrollTop = p.offsetTop - 200;
        }
      }
      //当前时间和总时间是否相等
      if (dangqian === this.gequzhongshijian) {
        //判断是否是最后一个
        if (this.playListID === this.playList.length - 1) {
          // 让索引值为零
          this.gequsuoyinzhi(0);
        } else {
          // 索引值加一
          this.gequsuoyinzhi(this.playListID + 1);
        }
      }
    },
  },
  components: {
    Vue3Marquee,
  },
};
</script>

<style lang="less" scoped>
.bgimg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  filter: blur(70px);
}
.detailTop {
  width: 100%;
  height: 1rem;
  display: flex;
  padding: 0.2rem;
  justify-content: space-between;
  align-items: center;
  fill: #fff;
  .detailTopLeft {
    display: flex;
    align-items: center;
    .leftMarquee {
      width: 3rem;
      height: 100%;
      margin-left: 0.4rem;
      span {
        color: #999;
      }
      .icon {
        width: 0.3rem;
        height: 0.3rem;
        fill: #999;
      }
    }
  }
}
.detailContent {
  width: 100%;
  height: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  .img_needle {
    width: 2rem;
    height: 3rem;
    position: absolute;
    left: 46%;
    transform-origin: 0 0;
    transform: rotate(-13deg);
    transition: all 2s;
  }
  .img_needle_active {
    width: 2rem;
    height: 3rem;
    position: absolute;
    left: 46%;
    transform-origin: 0 0;
    transform: rotate(0deg);
    transition: all 2s;
  }

  .img_cd {
    width: 5rem;
    height: 5rem;
    position: absolute;
    bottom: 2.3rem;
    z-index: -1;
  }
  .img_ar {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    position: absolute;
    bottom: 3.14rem;
    animation: rotate_ar 10s linear infinite;
  }
  .img_ar_active {
    animation-play-state: running;
  }
  .img_ar_pauesd {
    animation-play-state: paused;
  }
  @keyframes rotate_ar {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  }
}
.musicLyric {
  width: 100%;
  height: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.2rem;
  padding-top: 200px;
  overflow: scroll;
  transition-duration: 1s;
  p {
    color: rgb(190, 181, 181);
    margin-bottom: 0.3rem;
    transition-duration: 1s;
  }
  .active {
    color: #fff;
    font-size: 0.4rem;
    transition-duration: 1s;
  }
}
.detailFooter {
  width: 100%;
  height: 3rem;
  position: absolute;
  bottom: 0.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .footerTop {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .icon {
      width: 0.36rem;
      height: 0.36rem;
      fill: rgb(245, 234, 234);
    }
    .icon {
      width: 0.6rem;
      height: 0.6rem;
    }
  }
  .range {
    width: 100%;
    height: 0.06rem;
  }
  .footer {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .icon {
      fill: rgb(245, 234, 234);
    }
    .bofang {
      width: 1rem;
      height: 1rem;
    }
  }
}
</style>